<template>
  <!-- 试题录入 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>试题录入</span>
    </div>
    <div class="user_box">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            style="width: 470px"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select
            v-model="form.catalogID"
            placeholder="请选择"
            style="width: 470px"
          >
            <el-option
              v-for="item in directorys"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select
            v-model="form.enterpriseID"
            placeholder="请选择"
            style="width: 470px"
          >
            <el-option
              v-for="item in enterprise"
              :key="item.id"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select
            v-model="form.province"
            placeholder="请选择"
            @change="handleProvince"
            style="width: 230px; margin-right: 10px"
          >
            <el-option
              v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.city"
            placeholder="请选择"
            style="width: 230px"
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select
            v-model="form.direction"
            placeholder="请选择"
            style="width: 470px"
          >
            <el-option
              v-for="item in direction"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="form.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答题</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <quill-editor
            v-model="form.question"
            style="height: 250px; margin-bottom: 80px"
          ></quill-editor>
        </el-form-item>

        <el-form-item label="选项" prop="options">
          <el-form-item
            prop="options"
            class="radio-upload"
            v-for="(item, index) in form.options"
            :key="index"
          >
            <el-radio :label="1" v-model="item.isRight"
              >{{ item.code }}:</el-radio
            >
            <el-input
              v-model="item.title"
              style="width: 280px; margin-left: -25px"
            ></el-input>
            <el-upload
              class="upload"
              v-model="item.img"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <template #trigger>
                <span>上传图片</span>
              </template>
            </el-upload>
            <i class="el-icon-circle-close"></i>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" disabled>+增加选项与答案</el-button>
          </el-form-item>
        </el-form-item>

        <el-form-item label="解析视频：">
          <el-input v-model="form.videoURL" style="width: 470px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析：" prop="answer">
          <quill-editor
            v-model="form.answer"
            style="height: 250px; margin-bottom: 80px"
            @blur="$refs.form.validateField('question')"
          ></quill-editor>
        </el-form-item>

        <el-form-item label="题目备注" prop="desc">
          <el-input
            type="textarea"
            v-model="form.remarks"
            style="width: 470px"
          ></el-input>
        </el-form-item>

        <el-form-item label="试题标签" prop="region">
          <el-select
            v-model="form.tags"
            placeholder="请选择"
            style="width: 470px"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
// 富文本框
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, update, detail } from '@/api/hmmm/questions.js'
import { list } from '@/api/hmmm/companys.js'
import { list as directorysList } from '@/api/hmmm/directorys.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      citySelect: {
        province: [],
        cityDate: []
      },
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        options: [
          {
            isRight: false,
            code: 'A',
            title: '',
            img: ''
          },
          {
            isRight: false,
            code: 'B',
            title: '',
            img: ''
          },
          {
            isRight: false,
            code: 'C',
            title: '',
            img: ''
          },
          {
            isRight: false,
            code: 'D',
            title: '',
            img: ''
          }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        difficulty: [{ required: true, message: '请选择', trigger: 'change' }],
        question: [
          { required: true, message: '请输入题干', trigger: 'change' }
        ],
        answer: [{ required: true, message: '请输入题干', trigger: 'change' }]
      },
      subject: '',
      direction: direction,
      enterprise: '',
      directorys: '',
      updateId: ''
    }
  },
  async created () {
    this.getCityData()
    // 学科
    const { data } = await simple()
    console.log(data)
    this.subject = data
    // 企业
    const str = await list()
    this.enterprise = str.data.items
    console.log(this.enterprise)
    // 目录
    const der = await directorysList()
    console.log(der)
    this.directorys = der.data.items

    // 详情
    this.$route.params.id && this.getDetail()
  },
  methods: {
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // this.form.city = this.citySelect.cityDate[0]
    },
    async submitForm (formName) {
      try {
        this.$refs.form.validate()
        this.updateId = +this.$route.params.id
        console.log(this.$route.params.id)
        if (this.$route.params.id) {
          await update({ ...this.form, id: this.updateId })
          this.$message.success('修改成功')
        } else {
          await add(this.form)
          this.$message.success('添加成功')
        }

        this.$router.push('/questions/list')
      } catch (error) {
        this.$message.error('请填入必填项')
      }
    },
    // 详情
    async getDetail () {
      console.log(this.$route.params.id)
      const { data } = await detail({ id: this.$route.params.id })
      console.log(data)
      this.form = data
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },

    // 上传图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
  background-color: #fff;
  .clearfix {
    color: #303133;
    font-size: 16px;
  }
}
.user_box {
  color: #606266;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  padding: 10px;
  .radio-upload {
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    position: relative;
    .upload {
      display: inline-block;
      padding-left: 5px;
    }
    i {
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transform: translate(50%, -50%);
      transform: translate(50%, -50%);
      background: #fff;
      font-size: 18px;
      color: #999;
    }
  }
}
</style>
